<template>
  <div class="patient-reported-right-form-reason">
    <div class="table-box">
      <el-table :data="tableData">
        <el-table-column prop="variableName" label="变量名" />
        <el-table-column prop="fieldOldValue" label="原值" />
        <el-table-column
          prop="fieldNewValue"
          label="修改后值"
        />
        <el-table-column label="修改原因">
          <template slot-scope="scope">
            <el-autocomplete
              size="mini"
              class="inline-input"
              clearable
              v-model="scope.row.reason"
              :fetch-suggestions="querySearch"
              placeholder=""
              @select="item => handleSelect(item, scope.row)"
            ></el-autocomplete>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button
        size="mini"
        type="primary"
        @click="tableData.length > 1 ? $emit('callback') : $emit('close')"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>

export default {
  props: {
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      restaurants: []
    };
  },
  components: {  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    converter: function(row, variable) {
      return row[variable];
    },
    handleSelect(option, row) {
      if (Object.keys(row).length == 1) {
        this.tableData.forEach(item => {
          item.reason = option.value;
        });
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "录入错误" },
        { value: "添加信息" },
        { value: "修改信息" }
      ];
    }
  }
};
</script>

<style lang="scss" scoped>
.patient-reported-right-form-reason {
  > .table-box {
    margin-bottom: 1rem;
    >>> .el-table__body-wrapper {
      height: 37vh;
      overflow: auto;
    }
  }
  .footer {
    text-align: right;
  }
}
</style>